import React, { PropsWithChildren, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
// import { Rate } from 'antd';
// import { Button, Toast } from 'antd-mobile';
import actions from '@/store/actions/home';
import { HomeState } from '@/store/reducers/home';
import { loadMore, downRefresh, storage, debounce, throttle } from '@/utils'
import { CombinedState } from '@/store/reducers';
import HomeHeader from './components/HomeHeader';
import HomeSliders from './components/HomeSliders';
import LessonList from './components/LessonList';


import './index.less';


type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;
interface Params { }
// 属性带children跟自己写个interface然后加个chiren类型reactNode没区别
type Props = PropsWithChildren<RouteComponentProps<Params> & StateProps & DispatchProps>;


function Home(props: Props) {
  const homeContainerRef = useRef(null);
  const lessonListRef = useRef(null);
  useEffect(() => {
    loadMore(homeContainerRef.current, props.getLessons);
    downRefresh(homeContainerRef.current, props.refreshLessons)
    homeContainerRef.current.addEventListener("scroll", () => {
      // 为了滚动的时候强制刷新所以。   lessonListRef.current = () => forceUpdate((x) => x + 1);
      return lessonListRef.current();
    })
    if (props.lessons) {
      homeContainerRef.current.scrollTop = storage.get("homeScrollTop");
    }
    homeContainerRef && console.log(homeContainerRef.current, ' homeContainerRef.current.scrollTop多少?');
    return () => {
      storage.set("homeScrollTop", homeContainerRef.current.scrollTop);
    };
  }, []);

  return (
    // <div>
    //   <Rate value={3}>antd</Rate>
    //   <br></br>
    //   {/* <Button onClick={showToast}>antd-mobile</Button> */}
    // </div>
    <>
      <HomeHeader
        currentCategory={props.currentCategory}
        setCurrentCategory={props.setCurrentCategory}
        refreshLessons={props.refreshLessons}
      />
      <div className="home-container" ref={homeContainerRef}>
        <HomeSliders sliders={props.sliders} getSliders={props.getSliders} />
        <LessonList
          ref={lessonListRef}
          container={homeContainerRef}
          lessons={props.lessons}
          getLessons={props.getLessons}
        />
      </div>
    </>
  )
}

const mapStateToProps = (state: CombinedState): HomeState => {
  return state.home;
}
export default connect(mapStateToProps, actions)(Home);